<script setup>
	import {
		ref,
		reactive,
		toRefs,
		defineEmits,
	} from 'vue'
	import {
		Search
	} from '@element-plus/icons-vue'

	const props = defineProps({
		show: {
			type: Boolean,
			required: true,
			default: false
		}
	})
	const emits = defineEmits(['update:show'])
	let {
		show
	} = toRefs(props)



	const dialogVisible2 = ref(false)
	const dmName = ref(false)
	const placeholder = "查找域名/后缀 如：.cn \r多个域名/后缀用换行分隔"

	const activeTab = ref(0)

	const options = ref([{
		label: '模版一',
		value: 1
	}, {
		label: '模版一',
		value: 2
	}, {
		label: '未设置模版',
		value: 0
	}])

	const transferform = reactive({})

	const templateform = reactive({
		type: 1
	})

	const domainform = reactive({})

	const multipleSelection = ref([])

	const tableData3 = ref([{
		name: 'mzlhskj.cn',
		registrar: '190vip'
	}, {
		name: 'lrdspt.cn',
		registrar: 'ename'
	}, {
		name: 'bjfyhtshop.cn',
		registrar: 'xw'
	}, {
		name: '0731s.cn',
		registrar: '190vip'
	}, {
		name: 'zmxuan2.cn',
		registrar: '190vip'
	}])


	const tableData4 = ref([{
		name: '崔宏强的模板',
		registrant: '张三',
		type: 1
	}, {
		name: '企业1的模板',
		registrant: '北京荟米科技有限公司',
		type: 2
	}, {
		name: '长期持有的',
		registrant: '张三',
		type: 1
	}, {
		name: '临时的模板',
		registrant: '张三',
		type: 1
	}, {
		name: '模板名称456',
		registrant: '深圳英迈思信息技术',
		type: 1
	}])

	const tableData5 = ref([{
		name: 'axzadc.cn',
		old_template: '模板名称123',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '过户失败！[原因]'
	}, {
		name: 'axzadc.cn',
		old_template: '模板名称123',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '过户失败！[原因]'
	}, {
		name: 'axzadc.cn',
		old_template: '模板名称123',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '过户失败！[原因]'
	}, {
		name: 'axzadc.cn',
		old_template: '模板名称123',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '过户失败！[原因]'
	}])

	const total3 = ref(86)

	const total4 = ref(9)

	const domainShow = ref(true)
	const domainShow2 = ref(false)
	const domainShow3 = ref(false)

	const radio = ref(null)
	const templateSelection = ref({})

	const enterpriseOptions = ref([{
		label: '已认证的身份/邮箱1',
		value: 1
	}, {
		label: '已认证的身份/邮箱2',
		value: 2
	}, {
		label: '已认证的身份/邮箱3',
		value: 3
	}])


	const handleSelectionChange = (val) => {
		multipleSelection.value = val
	}

	const getCurrentRow = (row) => {
		templateSelection.value = row
	}


	const switchTab = (tabId) => {
		activeTab.value = tabId;
	};

	const getStringLen = (str) => {
		if (str) {
			let arr = str.split('\n')
			return arr.length
		} else {
			return 0
		}
	}

	const handleClose = () => {
		emits('update:show', false)
	}

	const dmFocus = () => {
		dmName.value = true
	}
	const dmBlur = () => {
		dmName.value = false
	}


	const addClick = () => {
		domainShow.value = false
		domainShow2.value = true
	}

	const domainBack = () => {
		domainShow.value = true
		domainShow2.value = false
	}

	const domainSelect = () => {
		let arr = multipleSelection.value.map(item => item.name)
		transferform.nameStr = arr.join('\n')
		domainShow.value = true
		domainShow2.value = false
	}

	const addTemplate = () => {
		domainShow.value = false
		domainShow3.value = true
	}

	const templateBack = () => {
		domainShow.value = true
		domainShow3.value = false
	}

	const templateSelect = () => {
		domainShow.value = true
		domainShow3.value = false
	}

	const onSubmit = () => {
		emits('update:show', false)
		dialogVisible2.value = true
	}
</script>
<template>
	<div>
		<el-dialog :modelValue="show" width="520" @close="handleClose">
			<template #header>
				<div class="dialog-header" v-if="domainShow">
					<span class="dialog-title">域名过户</span>
				</div>
				<div class="dialog-header" v-if="domainShow2">
					<el-icon @click="domainBack">
						<ArrowLeftBold />
					</el-icon>
					<span class="dialog-title">选择域名</span>
				</div>
				<div class="dialog-header" v-if="domainShow3">
					<el-icon @click="templateBack">
						<ArrowLeftBold />
					</el-icon>
					<span class="dialog-title">选择模板</span>
				</div>
			</template>
			<div class="transfer-form" v-if="domainShow">
				<div class="form-item">
					<div class="form-item-label">过户域名：</div>
					<div class="form-item-content">
						<div class="wrapdmTextarea textarea-box">
							<div class="textarea-warp" style="z-index: 200; top: 0;">
								<textarea id="textarea" placeholder="请输入要过户的域名，多条请换行分隔"
									class="ui-input dmTextarea dmTyping" name="domain" style="overflow-y: auto;"
									v-model="transferform.nameStr"></textarea>
								<div class="textarea-limit">
									{{getStringLen(transferform.nameStr)}}/100
								</div>
							</div>
						</div>
						<el-button class="btn-default" @click="addClick"><el-icon>
								<Plus />
							</el-icon>我的域名</el-button>
					</div>
				</div>
				<div class="form-item">
					<div class="form-item-label">目标模板：</div>
					<div class="form-item-content">
						<el-button class="select-mb btn-default" @click="addTemplate">
							<span v-if="templateSelection.name">{{templateSelection.name}}</span>
							<span v-else>
								<el-icon>
									<Plus />
								</el-icon>选择过户到的实名模板
							</span>
						</el-button>
					</div>
				</div>
			</div>
			<div v-if="domainShow2">
				<div class="domains-form">
					<span class="label">快速查找</span>
					<div class="wrapdmTextarea">
						<div class="textarea-warp" style="z-index: 200; top: 0;">
							<div class="textarea-suffix">
								<img src="@/assets/img/search.png" alt="" />
							</div>
							<textarea id="textarea" :placeholder="placeholder" class="ui-input dmTextarea" name="domain"
								@focus="dmFocus" @blur="dmBlur" :class="dmName ? 'dmTyping' : ''"
								style="overflow-y: auto;" v-model="domainform.nameStr"></textarea>
						</div>
					</div>
					<el-select v-model="domainform.template" placeholder="选择域名模板" style="width: 200px">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
				<div class="domains-table">
					<div class="table-tool">
						<div class="tool-left">搜索结果共{{total3}}条，已选择{{multipleSelection.length}}条。</div>
					</div>
					<el-table ref="multipleTableRef" :data="tableData3" @selection-change="handleSelectionChange"
						style="width: 100%" show-overflow-tooltip>
						<el-table-column type="selection" width="50"></el-table-column>
						<el-table-column prop="name" label="域名">
						</el-table-column>
						<el-table-column prop="registrar" label="注册商">
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div v-if="domainShow3">
				<div class="domains-form">
					<span class="label">快速查找</span>
					<el-input placeholder="输入关键词" :suffix-icon="Search" style="width: 200px;"></el-input>
				</div>
				<div class="domains-table">
					<div class="table-tool">
						<div class="tool-left">搜索结果共{{total4}}条。</div>
					</div>
					<el-table ref="multipleTable2" :data="tableData4" style="width: 100%" show-overflow-tooltip
						height="285">
						<el-table-column width="50">
							<template #default="scope">
								<el-radio :value="scope.$index" v-model="radio"
									@change.native="getCurrentRow(scope.row)"> </el-radio>
							</template>
						</el-table-column>
						<el-table-column prop="name" label="模板名称">
						</el-table-column>
						<el-table-column prop="registrant" label="注册人">
						</el-table-column>
						<el-table-column prop="type" label="模板类型">
						</el-table-column>
					</el-table>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer" v-if="domainShow">
					<el-button @click="handleClose" class="btn-default">取 消</el-button>
					<el-button type="warning" @click="onSubmit">
						确 认
					</el-button>
				</div>
				<div class="dialog-footer" v-if="domainShow2">
					<el-button @click="domainBack" class="btn-default">返 回</el-button>
					<el-button type="warning" @click="domainSelect">
						选 择
					</el-button>
				</div>
				<div class="dialog-footer" v-if="domainShow3">
					<el-button @click="templateBack" class="btn-default">返 回</el-button>
					<el-button type="warning" @click="templateSelect">
						选 择
					</el-button>
				</div>
			</template>
		</el-dialog>
		<el-dialog v-model="dialogVisible2" title="域名过户结果" width="520">
			<el-table :data="tableData5" style="width: 100%" show-overflow-tooltip height="285">
				<el-table-column prop="name" label="域名">
				</el-table-column>
				<el-table-column prop="old_template" label="原模板">
				</el-table-column>
				<el-table-column prop="result" label="结果">
				</el-table-column>
			</el-table>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="warning" @click="dialogVisible2 = false">
						确 认
					</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>


<style scoped lang="scss">
	.transfer-form .form-item {
		display: flex;
		margin-bottom: 20px;
	}

	.form-item-label {
		width: 70px;
		line-height: 32px;
	}

	.form-item-content {
		flex: 1;
		min-width: 0;
	}

	.textarea-box {
		width: 100%;
		margin-bottom: 15px;
		height: 180px;
	}


	.textarea-limit {
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.select-mb {
		width: 100%;
		border-style: dashed;
	}

	.domains-form {
		display: flex;
		align-items: center;
		margin-bottom: 10px;

		.label {
			width: 70px;
		}

		.wrapdmTextarea {
			width: 200px;
			margin-right: 14px;
		}
	}

	.domains-table {
		.table-tool {
			padding-bottom: 10px;
		}
	}


</style>